---
title: "Accessibility Checker Rule Help: WCAG21_Label_Accessible"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

 * People with dexterity impairment using voice control

### Why is this important?

Speech-input users navigate to an input field by speaking the visible field label (i.e., text displayed on the screen). Their verbal command activates the interactive component’s programmatic [accessible name](https://www.w3.org/TR/accname-1.1/#dfn-accessible-name) and sets focus to the component. A point of failure occurs when the visible label and the accessible name are different, or the visible label text string is not contained within the accessible name value.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### Accessible name does not match or contain the visible label text
Accessible name must match or contain the visible label text

[IBM 2.5.3 Label in Name](https://www.ibm.com/able/guidelines/ci162/label_in_name_71.html)

<div id="locSnippet"></div>

### What to do

* Provide an [accessible name value](https://www.w3.org/TR/wai-aria-1.1/#namecalculation) that matches or contains the visible label for this control. For example:

<CodeSnippet type="multi" light={true}>&lt;button name="pageLink" aria-label="Next Page in the list"&gt;Next Page&lt;/button&gt;
    
&lt;label for="test2"&gt;License Number:&lt;/label&gt;
&lt;input type="text" id="test2" aria-label="enter driver license number"/&gt;
    
&lt;button name="lastPageLink" aria-label="last page"&gt;Last Page&lt;/button&gt;</CodeSnippet>

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)